import React, { useEffect, useState } from "react";
import { Radio, DatePicker, Space, Spin } from "antd";
import * as echarts from "echarts";
import { getAll } from "../services/order";
import { getAllTypes } from '../services/classify';

export default function Classify() {
    let [echartsType, setEchartsType] = useState(1);
    let [time, setTime] = useState("");

    const show = async (e, y) => {
        let myChart1 = document.getElementById("myChart");
        // 销毁之前的实例
        echarts.dispose(myChart1);
        // 重新创建新的实例
        let myChart = echarts.init(myChart1);
        if (e == 1) {
            myChart.setOption(await barOption(y), true);
        } else {
            myChart.setOption(await areaOption(y), true);
        }
    }

    const barOption = async (year) => {
        let typeArr = [];
        let priceArr = [];
        let circleArr = [];
        let { data } = await getAll({ year });
        let types = await getAllTypes();
        for (let i = 0; i < types.data.length; i++) {
            typeArr.push(types.data[i].sort);
            priceArr.push(0);
        }
        for (let i = 0; i < data.length; i++) {
            if (data[i].status == 4) {
                for (let j = 0; j < data[i].itemInfo.itemInfo.length; j++) {
                    typeArr.map((item, index) => {
                        if (data[i].itemInfo.itemInfo[j].types == item) {
                            priceArr[index] += data[i].itemInfo.itemInfo[j].price * data[i].itemInfo.itemInfo[j].count;
                        }
                    })
                }
            }
        }
        typeArr.map((item, index) => {
            circleArr.push({
                value: priceArr[index],
                name: item
            });
        })
        return {
            title: {
                text: "各类商品年销售额统计¥",
            },
            tooltip: {},
            xAxis: {
                data: typeArr
            },
            yAxis: {},
            series: {
                type: "bar",
                data: priceArr
            },
        }
    };
    const areaOption = async (year) => {
        let typeArr = [];
        let priceArr = [];
        let circleArr = [];
        let { data } = await getAll({ year });
        let types = await getAllTypes();
        for (let i = 0; i < types.data.length; i++) {
            typeArr.push(types.data[i].sort);
            priceArr.push(0);
        }
        for (let i = 0; i < data.length; i++) {
            if (data[i].status == 4) {
                for (let j = 0; j < data[i].itemInfo.itemInfo.length; j++) {
                    typeArr.map((item, index) => {
                        if (data[i].itemInfo.itemInfo[j].types == item) {
                            priceArr[index] += data[i].itemInfo.itemInfo[j].price * data[i].itemInfo.itemInfo[j].count;
                        }
                    })
                }
            }
        }
        typeArr.map((item, index) => {
            circleArr.push({
                value: priceArr[index],
                name: item
            });
        })
        return {
            title: {
                text: "各类商品年销售额占比统计％"

            },
            tooltip: {
                trigger: "item",
                formatter: '{b}<br />{d}%'
            },
            legend: {
                orient: "vertical",
                left: "left",
                top: "30"
            },
            series: [
                {
                    type: "pie",
                    stillShowZeroSum: true,
                    label: {
                        show: true,
                    },
                    radius: '50%',
                    // data: areaData,
                    data: circleArr,
                },
            ],
        };
    };
    const onChange = (e) => {
        setEchartsType(e.target.value)
        show(echartsType, time);
    };
    const handleDateChange = (date, dateStr) => {
        setTime(dateStr);
        show(echartsType, time);
    }

    useEffect(() => {
        show(echartsType, time);
    });

    return (
        <>
            <Space direction="vertical">
                <Radio.Group onChange={onChange} defaultValue="1">
                    <Radio.Button type="primary" value="1" style={{ marginRight: 20 }}>各类商品年销售额统计</Radio.Button>
                    <Radio.Button type="primary" value="2" >各类商品年销售额占比统计</Radio.Button>
                </Radio.Group>
                <Space direction="horizontal">
                    <DatePicker onChange={handleDateChange} picker="year" placeholder="按年份查看" />
                    <span>当前年份: {time}</span>
                </Space>
            </Space>
            <div id="myChart" style={{ width: '100%', height: 500, marginTop: 50, marginLeft: 20 }}>
                <span>加载中...</span>
                <Spin size="large" tip="加载中..." />
            </div>
        </>
    );
}